<template>
  <view class="order">
    <view class="order-header" :style="{'height': navbarHeight + tabsHeight + 'px'}">
      <!-- #ifdef APP-PLUS || MP-WEIXIN -->
      <u-navbar ref="navbar" :title="title" back-icon-color="#000" :is-back="true" title-color="#000"
                :background="{ background:'#ffffff'}" :border-bottom="true"></u-navbar>
      <!-- #endif -->
      <view class="tabs_box">
        <u-tabs
            :list="list"
            :is-scroll="true"
            :current="current"
            @change="change"
            active-color="#FFA844"
            inactive-color="#999999"
            :active-item-style="{ color: '#303133' }"
            bar-height="10"
            font-size="26"
            item-width="25%"
            gutter="0"
        ></u-tabs>
      </view>
    </view>
    <view class="order_list_wrap">
      <scroll-view
        :scroll-y="true"
        :refresher-enabled="true"
        @refresherrefresh="onrefresherrefresh"
        :refresher-triggered="isTriggered"
        refresher-default-style="none"
        lower-threshold="30"
        @scrolltolower="onScrolltolower"
        style="height: 100%">
        <!-- 加载中提示 -->
        <view class="lanjiazai_wrap" v-if="skeletonLoading">
          <view class="lanjiazai_item">
            <u-loading mode="circle" :color="'#FFA844'" size="80" ></u-loading>
            <view class="tag">加载中...</view>
          </view>
        </view>
        <!--加载订单列表组件-->
        <com-order-list :orderList="orderList" @noteRequireFun="noteRequireFun" />
        <!--加载更多-->
        <view class="chudijiazai">
          <u-loadmore icon-type="flower" :status="loadingstatus" font-size="24" :load-text="loadText" margin-top="30"
                      margin-bottom="30"/>
          <view v-if="Bottomingrefresh == true" class="Bottomingrefresh" @click="RefreshBtn()">立即刷新</view>
        </view>
        <view v-if="orderList.length == 0" class="noDatas" :style="{marginTop:tabsHeight + navbarHeight + 'px'}">
          <u-empty text="暂无订单" mode="favor" icon-size="106"></u-empty>
        </view>
      </scroll-view>
    </view>


    <!--套餐详情弹窗-->
    <u-popup v-model="LookTaoCanShow" mode="bottom" border-radius="34">
      <view class="lookbiji_wrap">
        <view class="details_info3">
          <view class="title">套餐详情</view>
          <view class="list_info_wrap" v-if="TaoCanDetails.length != 0">
            <view class="list_item" v-for="(itemg,indexg) in TaoCanDetails" :key="indexg">
              <view class="fucai"><span></span>{{itemg.name}}</view>
              <view class="zicai_wrap">
                <view class="zicai u-flex" v-for="(items,indexs) in itemg.list" :key="indexs">
                  <view>{{items.name}}</view>
                  <view>（{{items.num || '0'}}份）</view>
                  <view>¥{{items.price || '0.00'}}</view>
                </view>
              </view>
            </view>
          </view>
          <view v-else>
            <u-empty text="暂无套餐" mode="favor" font-size="24" icon-size="60"></u-empty>
          </view>
        </view>
      </view>
    </u-popup>
    <!--  笔记详情-->
    <u-popup v-model="orderNoteShow" mode="center" border-radius="14" width="80%">
      <view class="look-box" style="padding: 40rpx">
        <view class="Look-content" >{{orderNoteData}}</view>
        <view @click="orderNoteShow = false" class="Look-btn">
          <text >我知道了</text>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import ComOrderList from "@/subPackagePurse/order-list/components/com-order-list.vue";

const app = getApp();
export default {
  components: {ComOrderList},
  data() {
    return {
      BestImgUrl: app.globalData.imgurl,
      imgurlBwc: app.globalData.imgurlBwc,
      title: '订单管理',
      cancel_order_popup: false,
      more: false,
      showAsk: false,
      typeList: [
        {
          name: '探店订单',
          id: 0
        }, {
          name: '捡漏订单',
          id: 1
        }, {
          name: '砍价订单',
          id: 1
        }],
      LookBiJiShow: false,//笔记详情弹窗
      LookBiJiData: {}, // 笔记详情内容
      TaoCanDetails: [], // 套餐详情
      LookTaoCanShow: false, // 套餐详情弹窗
      typeIdx: 0,
      //全部- 2待使用- 3待上传- -2已驳回- 4待审核- 6待返款- 5已完成- 1待付款- -3已退款- -1已取消
      list: [
        {
          name: '全部',
          id: '0'
        }, {
          name: '待核销',
          id: '2'
        }, {
          name: '待完成笔记',
          id: '3'
        },{
          name: '已完成',
          id: '5'
      }],
      current: 0,
      orderList: [],
      typs: '0',//0全部 1待付款 2已付款 3上传 4待审核
      pageSize: 1,
      skeletonLoading: true, //加载中图片
      Bottomingrefresh: false,
      loadingstatus: 'loading',
      loadText: {
        loadmore: '轻轻上拉',
        loading: '加载中...',
        nomore: '没有更多了'
      },
      failTimeOutShow: false,
      zanwuloc: true,
      isTriggered: false, // 下拉刷新
      // 平台数据
      platformData: [
        {
          platformType: 1,
          title: '小红书',
          image: '/note/xhs@2x.png',
        },
        {
          platformType: 2,
          title: '抖音',
          image: '/note/douyin@2x.png',
        },
        {
          platformType: 3,
          title: '大众点评',
          image: '/note/dzdp@2x.png',
        },
        {
          platformType: 4,
          title: '美团',
          image: '/note/mt@2x.png',
        },
      ],
      windowHeight: '',// 屏幕高度
      headHeight: '',// 头部高度
      navbarHeight: '',//顶部导航栏高度
      tabsHeight: '',//顶部tabs的高度
      shop_id: '', // 店铺id
      orderNoteShow:  false,//笔记要求详情弹窗
      orderNoteData: '', //笔记要求详情内容
    }
  },
  onLoad(ops) {
    let that = this
    that.typs = ops.types || "0"
    console.log("ops",ops)
    that.shop_id = ops.shop_id || ''
    that.GetOrderslist(ops.types)

    uni.$on('orderRef', (val) => {
      that.GetOrderslist(val)
    });
    // 获取屏幕高度
    this.windowHeight = uni.getWindowInfo().windowHeight
    // navbar高度
    uni.createSelectorQuery().select('.vue-ref').boundingClientRect(rect => {
      this.navbarHeight = Number(rect.height)
    }).exec();
    //顶部tabs的高度
    uni.createSelectorQuery().select('.tabs_box').boundingClientRect(rect => {
      this.tabsHeight = Number(rect.height)
    }).exec();
    // 头部高度
    uni.createSelectorQuery().select('.order-header').boundingClientRect(rect => {
      this.headHeight = Number(rect.height)
    }).exec();
    // 定义tabs选中的选项
    that.current = ops.types - 1 || 0
    console.log('options', that.current)
  },

  methods: {
    // 下拉刷新
    onrefresherrefresh(){
      let that = this
      that.skeletonLoading = true
      that.pageSize = 1
      // 开启 下拉刷新
      that.isTriggered = true
      // 下拉刷新清空数据
      // that.orderList = []
      setTimeout(function () {
        that.Getorders()
        uni.stopPullDownRefresh();
        // 关闭 下拉刷新
        that.isTriggered = false
      }, 1500);
    },
    //触底加载
    onScrolltolower() {
      // console.log('已滚动到底部');
      let that = this
      that.loadText.nomore = '没有更多了'
      that.Bottomingrefresh = false
      that.loadingstatus = 'loading';
      if (that.zanwuloc == true) {
        setTimeout(function () {
          that.pageSize++;
          that.Getorders()
          uni.hideNavigationBarLoading()
        }, 500);
      } else {
        setTimeout(function () {
          uni.hideNavigationBarLoading()
        }, 500);
      }
    },



    GetOrderslist(type) {
      let that = this
      if (type == 0) {

        that.current = 0

      } else if (type == 1) {

        that.current = 7

      } else if (type == 2) {

        that.current = 1

      } else if (type == 3) {

        that.current = 2

      } else if (type == 4) {

        that.current = 4

      } else if (type == 5) {

        that.current = 5

      }
      that.Getorders();
    },
    Getorders() {
      let that = this
      that.$api.GetgoodsList({
        page: that.pageSize,
        limit: 10,
        status: that.typs,
        shop_id: that.shop_id,
      }).then(res => {
        res.data.result.forEach(item => {
          if(item.status === 2){
            item.tab_name = '顾客已下单，正在前往门店的途中'
          } else if(item.status === 3){
            item.tab_name = '顾客正在用心创作中，请您耐心等候'
          } else {
            item.tab_name = '笔记不满意？ | 可联系服务群内业务经理修改笔记'
          }

        })
        console.log('订单列表=', res.data.result)
        that.loadText.nomore = '没有更多了'
        that.Bottomingrefresh = false
        if (that.pageSize !== 1) {
          if (res.data.result.length !== 0) {
            that.loadingstatus = 'loading';
            that.orderList = that.orderList.concat(res.data.result)
            console.log('订单列表=', that.orderList);
          } else {
            that.loadingstatus = 'nomore'
          }
        } else {
          that.platformData.forEach(pItem => {
            res.data.result.forEach(resItem => {
              if (pItem.platformType === resItem.platform_type) {
                resItem.platform_type = {
                  platformType: resItem.platform_type,
                  title: pItem.title,
                  image: pItem.image,
                }
              }
            })
          })
          that.orderList = res.data.result
          that.loadingstatus = 'nomore';
        }
        that.skeletonLoading = false
      }).catch(err => {
        that.skeletonLoading = false
        if (that.loadingstatus == 'loading') {
          that.loadingstatus = 'nomore'
          that.loadText.nomore = '网络好像出问题了~'
          that.Bottomingrefresh = true
        } else {
          that.shopsLists = []
          that.loadingstatus = 'loading'
          that.loadText.nomore = '没有更多了'
          that.Bottomingrefresh = false
          that.failTimeOutShow = true
        }
      })
    },
    detail(data) {
      let that = this
      that.order_item = data
      that.showAsk = true
    },
    //tab选项
    change(res) {
      this.current = res.index;
      this.typs = this.list[res.index].id
      this.orderList = []
      this.pageSize = 1
      this.Getorders()
    },
    cancel(data) {
      let that = this
      that.cancel_order_popup = false
      //console.log('用户点击确定');
      that.$api.TDquxiaoOrder({
        order_id: data.id
      }).then(resss => {
        that.Getorders()
      }).catch(err => {
        uni.showToast({
          title: err.data.msg,
          icon: 'none',
          duration: 2000
        });
      })
    },
  //  复制订单号
    copy_no(order_no) {
      uni.setClipboardData({
        data: order_no, // e是你要保存的内容
        success: function () {
          uni.showToast({
            title: '复制成功',
            icon: 'none'
          })
        }
      });
    },
    //订单详情
    lookBiTc(data) {
      console.log('查看套餐', data);
      let that = this
      that.$api.GetOrderDetails({
        order_id: data.id
      }).then(res => {
        console.log('订单详情', res);
        that.LookTaoCanShow = true
        that.TaoCanDetails = res.data.result.package.goods
      });
    },
  //  笔记要求详情
    noteRequireFun(data){
      this.orderNoteShow = true
      this.orderNoteData = data
    },
    //触底加载中的刷新
    RefreshBtn() {
      let that = this
      that.loadingstatus = 'loading'
      that.loadText.nomore = '没有更多了'
      that.Bottomingrefresh = false
      that.Getorders()
    },
    getHeight() {
      let el = this.$refs.navbar;
      if (el) {
        let height = el.offsetHeight; // 或者使用el.clientHeight获取内容区域的高度
      }
    }
  },
  mounted() {
    this.$nextTick(this.getHeight);
  },
  // 分享至好友/群聊
  onShareAppMessage(res) {
    const userInfo = JSON.parse(uni.getStorageSync('userinfo') || '{}')
    console.log('用户信息', userInfo)
    return {
      title: '欢迎使用小程序',
      path: 'pages/index/index?shareId=' + userInfo.id,
      imageUrl: '/static/images/share.png'
    }

  },
  // 分享至朋友圈
  onShareTimeline() {},
}
</script>

<style lang="scss">
page {
  height: 100%;
  background: #F4F4F4;
}
.order{
  height: 100%;
  display: flex;
  flex-direction: column;
  position:relative;
}
.order-header{
  position: relative;
  z-index: 10;
}
/deep/ scroll-view ::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}
.tabs_box{position: fixed;left: 0;right: 0; z-index: 10;}
.order_list_wrap {
  flex: 1;
  overflow-y: auto;
  padding: 0 20rpx calc(env(safe-area-inset-bottom));
  .order_list_item:first-child {
    margin-top: 20rpx;
  }
  .order_list_item {
    margin-bottom: 30rpx;
    border-radius: 24rpx;
    padding: 24rpx;
    background-color: #ffffff;

    .order_title {
      align-items: center;
      justify-content: space-between;
      font-size: 24rpx;
      .shop_title {
        align-items: center;

        image {
          width: 32rpx;
          height: 32rpx;
          margin-right: 6rpx;
        }

        text {
          color: $zzy-text-color-999999;
          font-size: 24rpx;
          -webkit-line-clamp: 1;
        }
      }

      .status {
        flex: 1;
        text-align: right;
        font-size: 24rpx;

        .color1 {
          color: #FF4E0D;
        }

        .color2 {
          color: #00AA3B;
        }
      }
    }
    .shop-list-item-top {
      height: 180rpx;
      display: flex;
      margin-bottom: 20rpx;
      margin-top: 30rpx;
      .shop-list-item-img {
        width: 180rpx;
        height: 180rpx;
        border-radius: 16rpx;
        overflow: hidden;
        border: 2rpx solid #F6F6F6;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .shop-list-item-right {
        margin-left: 30rpx;
        flex: 1;
        .shop-list-item-title {
          font-size: 28rpx;
          color: #333333;
          line-height: 60rpx;
        }
        .shop-list-item-subt {
          font-size: 24rpx;
          color: #888888;
          line-height: 40rpx;
        }
        .shop-list-item-price {
          color: #FF7900;
          line-height: 50rpx;
        }
      }
    }
    .shop-list-item-bottom{
      background: #F7F7F7;
      padding: 20rpx;
      border-radius: 12rpx;
      //margin-bottom: 30rpx;
      .shop-list-item-bottom-text {
        position: relative;
        line-height: 50rpx;
        font-size: 24rpx;
        display: flex;
        text {
        }
        .nide-text {
          color: #888888;
          font-size: 24rpx;
          line-height: 50rpx;
          width: calc(100% - 200rpx);
          height: 50rpx;
        }
        text:first-child{
          margin-right: 20rpx;
        }
      }


    }
    .goods_info {
      align-items: flex-start;
      margin-top: 34rpx;

      .goods_img {
        width: 180rpx;
        height: 180rpx;

        image {
          width: 180rpx;
          height: 180rpx;
          border-radius: 16rpx;
        }
      }

      .goods_name {
        padding-left: 16rpx;
        flex: 1;
        margin-bottom: 24rpx;

        view:nth-child(1) {
          font-weight: bold;
          color: $zzy-text-color-333333;
        }

        view:nth-child(2) {
          font-size: 24rpx;
          color: $zzy-text-color-666666;
        }

        view:nth-child(3) {
          align-items: center;
          justify-content: space-between;
          font-size: 24rpx;
          color: $zzy-text-color-666666;
          flex: 1;

          span {
            color: $zzy-text-color-333333;
            font-size: 28rpx;
          }
        }
      }
    }


    .order_btnzu {
      align-items: center;
      justify-content: space-between;

      .lxkf {
        flex: 1;
        align-items: center;
        color: $zzy-text-color-333333;
        font-size: 24rpx;
      }

      .lxkefu {
        font-size: 24rpx;

        /* /deep/ */
        button {
          background-color: transparent !important;
          padding: 0 !important;
          margin: 0 !important;
          line-height: 40rpx !important;
          height: 40rpx;
          font-size: 24rpx !important;
          color: #333333 !important;
        }

        /* /deep/  */
        button::after {
          border: none !important;
        }
      }

      .right_zu {
        .kongxin {
          border-radius: 200rpx;
          width: 144rpx;
          height: 56rpx;
          line-height: 56rpx;
          border: 1px solid #d9d9d9;
          color: $zzy-text-color-333333;
          text-align: center;
          font-size: 24rpx;
        }

        .shise {
          background-color: #FF7900;
          border-radius: 200rpx;
          width: 144rpx;
          height: 56rpx;
          line-height: 56rpx;
          border: 1px solid #FF7900;
          color: #ffffff;
          text-align: center;
          font-size: 24rpx;
          margin-left: 20rpx;
        }
      }
    }
  }
}
//套餐详情
.lookbiji_wrap {
  padding: 30rpx;
  background-color: #F4F4F4;

  .popup_title {
    font-weight: bold;
    font-size: 34rpx;
    text-align: center;
  }

  .loobbiji_info {
    .url_wrap {
      background-color: #ffffff;
      padding: 24rpx;
      margin: 24rpx auto;
      border-radius: 24rpx;

      .lookbiji_url {
        align-items: center;
        justify-content: space-between;

        view:nth-child(1) {
          font-weight: bold;
          font-size: 32rpx;

          span {
            font-size: 26rpx;
            font-weight: initial;
            color: #666666;
          }
        }

        view:nth-child(2) {
          background-color: #FF4E0D;
          border-radius: 200rpx;
          color: #ffffff;
          width: 120rpx;
          height: 56rpx;
          line-height: 56rpx;
          text-align: center;
        }
      }

      .url_address {
        color: #f00;
        margin-top: 12rpx;
        text-decoration: underline;
      }
    }

    .bijijietu {
      background-color: #ffffff;
      padding: 20rpx 10rpx;
      border-radius: 24rpx;

      .bjjttitle {
        font-size: 32rpx;
        font-weight: bold;
        padding: 14rpx 10rpx 10rpx 10rpx;
      }

      .demo-layout {
        margin-top: 20rpx;

        image {
          width: 100%;
          height: 200rpx;
          border-radius: 20rpx;
        }
      }
    }
  }
}
.details_info3 {
  padding: 32rpx 28rpx;
  background-color: #ffffff;
  border-radius: 28rpx;
  margin: 30rpx 0;

  .title {
    font-size: 30rpx;
    color: #333;
    font-weight: bold;
    width: 200rpx;
    height: 54rpx;
    margin-bottom: 28rpx;
  }

  .list_info_wrap {
    align-items: center;
    padding: 0 22rpx 0 22rpx;
    margin-top: 20rpx;

    .list_tile {
      color: #333;
      font-weight: bold;
      font-size: 28rpx;
      align-items: center;

      span {
        display: inline-block;
        width: 6rpx;
        height: 6rpx;
        border-radius: 200rpx;
        background-color: #999;
        margin-right: 10rpx;
      }
    }

    .list_item {
      align-items: flex-start;
      margin-top: 20rpx;
      padding-left: 0;

      .fucai {
        font-size: 28rpx;
        color: #333;
        flex: 1;
        font-weight: bold;

        span {
          display: inline-block;
          width: 10rpx;
          height: 10rpx;
          background-color: #d4d4d4;
          border-radius: 200rpx;
          margin-right: 14rpx;
        }
      }

      .zicai_wrap {
        padding-left: 22rpx;
      }

      .zicai {
        margin-top: 12rpx;

        view:nth-child(1) {
          font-size: 28rpx;
          color: #666;
          flex: 1;
        }

        view:nth-child(2) {
          font-size: 28rpx;
          color: #666;
          margin-left: auto;
        }

        view:nth-child(3) {
          font-size: 28rpx;
          color: #666;
          font-weight: bold;
          margin-left: auto;
        }
      }
    }
  }
}
//  笔记要求详情css
.look-box{
  padding: 40rpx;
  .Look-content{
    font-size: 28rpx;
    color: #3D3D3D;
    line-height: 56rpx;
    text-align: center;
  }
  .Look-btn{
    margin-top: 40rpx;
    background: linear-gradient( 104deg, #F18F2C 0%, #FF7A00 100%);
    border-radius: 50rpx;
    padding: 20rpx 0;
    text-align: center;
    text{
      font-size: 28rpx;
      color: #FFFFFF;
      text-align: center;
    }
  }
}
/* 懒加载css */
.lanjiazai_wrap {
  position: relative;
  z-index: 10000;
  text-align: center;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: #999;
  padding: 50rpx 0;
  .lanjiazai_item {
    text-align: center;
    .loading_icon {
      width: 120rpx;
      height: 120rpx;
    }
    .loading_gif {
      width: 120rpx;
      height: 120rpx;
    }
  }
}
</style>